<template>
    <!-- <div>封堵白名单</div> -->
    <a-row>
      <a-col>
        <a-card :bordered="false" style="margin-bottom: 10px">
          <!-- 查询区域 -->
          <div class="search-wrapper-btn">
              <a-button type="link" @click="show = !show">
                <span v-if="!show">展开
                  <a-icon type="down" />
                </span>
                <span v-else>收起
                  <a-icon type="up" />
                </span>
              </a-button>
            </div>
          <div class="table-page-search-wrapper">
            <a-form-model ref="ruleForm" :model="pageFilter" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row style="display:flex">
                <a-col :span="6">
                <a-form-model-item label="抽检类型">
                    <a-select style="width:100%" v-model="pageFilter.sampType">
                      <a-select-option v-for="(item, key) in sampType" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                      </a-select-option>
                    </a-select>
                </a-form-model-item>
              </a-col>
                <a-col :span="6">
                <a-form-model-item label="抽检方式" style="margin-left:0px">
                    <a-select style="width:100%" v-model="pageFilter.sampMethod">
                      <a-select-option v-for="(item, key) in sampMethod" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                      </a-select-option>
                    </a-select>
                </a-form-model-item>
                </a-col>
                <a-col :span="6">
                <a-form-model-item label="抽检状态" style="margin-left:0px">
                    <a-select style="width:100%" v-model="pageFilter.extarctionStatus">
                      <a-select-option v-for="(item, key) in extarctionStatus" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                      </a-select-option>
                    </a-select>
                </a-form-model-item>
              </a-col>
                  <a-col :span="6" style="margin-left:0px">
                    <a-space :size="6">
                      <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
                      <a-button @click="onResetForm" icon="reload">重置</a-button>
                    </a-space>
                  </a-col>   
              </a-row>
              <a-col :span="6">
                <a-form-model-item label="抽检周期"  v-if="show">
                    <a-select style="width:100%" v-model="pageFilter.sampPeriod">
                      <a-select-option v-for="(item, key) in sampPeriod" :key="key" :value="item.value">
                        {{ item.title?item.title:'' }}
                      </a-select-option>
                    </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="6">
                <a-form-model-item label="抽检范围"  v-if="show">
                    <a-range-picker v-model="time"/>
                </a-form-model-item>
              </a-col>
            </a-form-model>
          </div>
        </a-card>
        <a-card :bordered="false">
          <div>
            <a-button type="primary" @click="Add" style="margin-right:10px">手工抽检</a-button>
           
            <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
              :columns="columns" :dataSource="pageData" @selectedRowKey="onSelectedRow" @change="onTableChange">
              <template slot="action" slot-scope="text, record">
                    <a-button type="link" @click="Edit(record)" v-if="record.extarctionStatus != 3">编辑</a-button>
                    <a-button type="link" @click='yanzheng(record)' v-if="record.extarctionStatus == 2">验证</a-button>
                    <a-button type="link" @click="Details(record)" v-if="record.extarctionStatus == 3">详情</a-button>
                    <a-button type="link" @click="Report" v-if="record.extarctionStatus == 3">查看报告</a-button>
              </template>
              <template slot="cjfw" slot-scope="text, record">
                    <!-- <a-button type="link" @click="Edit">编辑</a-button> -->
                    <span class="box">{{ timestampToTime2(new Date(record.sampStartScope)) }} ~ {{ timestampToTime2(new Date(record.sampEndScope)) }}</span>
              </template>
            </z-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </template>
  
  <script>
  import { pageNew1,verification } from '@/api/plugging/Police'
  export default {
    mounted () {
      this.onQuery()
    },
    data () {
      return {
        time:[],
        sampType:[
          {
            title:'手工抽检',
            value:0
          },
          {
            title:'系统定时抽检',
            value:1
          },
        ],
        sampMethod:[
          {
            title:'按比例',
            value:0
          },
          {
            title:'按数量',
            value:1
          },
        ],
        extarctionStatus:[
          {
            title:'待抽取',
            value:1
          },
          {
            title:'待验证',
            value:2
          },
          {
            title:'已完成',
            value:3
          },
        ],
        sampPeriod:[
          {
            title:'日检',
            value:0
          },
          {
            title:'周检',
            value:1
          },
          {
            title:'月检',
            value:2
          },
          {
            title:'年检',
            value:3
          },
          {
            title:'自定义',
            value:4
          },
        ],
        show:false,
        labelCol: { span: 5 },
        wrapperCol: { span: 16 },
        loading: false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData: {},
        columns:[
          {
            title: '序号',
            dataIndex: 'order',
            width: 60,
            align: 'center',
            customRender: (text, record, index) =>
              `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          },
          {
            title: '抽检编号',
            dataIndex: 'sampNo',
            align: 'center',
            width:90
          },
          {
            title: '抽检类型',
            dataIndex: 'sampType',
            align: 'center',
            width:120,
            customRender:(text) => `${text==0?'手工抽检':text==1?'系统定时抽检':'无'}`
          },
          {
            title: '抽检周期',
            dataIndex: 'sampPeriod',
            align: 'center',
            width:90,
            customRender:(text) => `${text==0?'日检':text==1?'周检':text==2?'月检':
          text==3?'年检':text==4?'自定义':'无'}`
          },
          {
            title: '抽检范围',
            dataIndex: 'cjfw',
            align: 'center',
            width:250,
            scopedSlots: { customRender: 'cjfw' },
          },
          {
            title: '范围总量',
            dataIndex: 'totalRange',
            align: 'center',
            width:90
          },
          {
            title: '抽检方式',
            dataIndex: 'sampMethod',
            align: 'center',
            width:90,
            customRender:(text) => `${text==0?'按比例':text==1?'按数量':'无'}`
          },
          {
            title: '抽检比例',
            dataIndex: 'sampProportity',
            align: 'center',
            width:90
          },
          {
            title: '抽检数量',
            dataIndex: 'sampQuantity',
            align: 'center',
            width:90
          },
          {
            title: '移动验证数量',
            dataIndex: 'mobVerificationQuantity',
            align: 'center',
            width:120
          },
          {
            title: '移动验证率',
            dataIndex: 'mobVerificationRate',
            align: 'center',
            width:110
          },
          {
            title: '联通验证数量',
            dataIndex: 'unVerificationQuantity',
            align: 'center',
            width:120
          },
          {
            title: '联通验证率',
            dataIndex: 'jointVerificationRate',
            align: 'center',
            width:110
          },
          {
            title: '电信验证数量',
            dataIndex: 'telVerificationQuantity',
            align: 'center',
            width:120
          },
          {
            title: '电信验证率',
            dataIndex: 'telVerificationRate',
            align: 'center',
            width:110
          },
          {
            title: '抽检人',
            dataIndex: 'sampPerson',
            align: 'center',
            width:80
          },
          {
            title: '抽取时间',
            dataIndex: 'extractionTime',
            align: 'center',
            width:90
          },
          {
            title: '抽检状态',
            dataIndex: 'extarctionStatus',
            align: 'center',
            width:90,
            customRender:(text) => `${text==1?'待抽取':text==2?'待验证':text==3?'已完成':'无'}`},
          {
            title: '抽检完成时间',
            dataIndex: 'extractionCompTime',
            align: 'center',
            width:120
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
            width:180,
          },

        ]
      }
    },
    methods: {
      Add(){
        this.$router.push({
        path: '/plugging/police/HandlUnseal/Add',
        query: {}
      })
      },
      Edit(record){
        this.$router.push({
        path: '/plugging/police/HandlUnseal/Edit',
        query: {
            type:'edit',
            id:record.id
        }
      })
      },
      Details(record){
        this.$router.push({
        path: '/plugging/police/HandlUnseal/Details',
        query: {
          type:'Details',
          id:record.id
        }
      })
      },
      Report(){
        this.$router.push({
        path: '/plugging/police/HandlUnseal/Report',
        query: {}
      })
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        let a = this.timestampToTime2(this.time[0])
        let b = this.timestampToTime2(this.time[1])
        this.pageFilter.sampStartScope = a
        this.pageFilter.sampEndScope = b
        this.refreshTable()
      },
      //重置
      onResetForm() {
        this.pageFilter = {
          pageNo: 1,
          pageSize: 10,
          departmentId: this.departmentId
        }
        this.time = []
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = { currentPage: 'pageNo' }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        this.loading = true
        pageNew1(this.pageFilter).then( res => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
      timestampToTime2(timestamp) {
        if (timestamp === 0 || timestamp == null) {
          return ''
        } else {
          var date = new Date(Date.parse(timestamp))
          var Y = date.getFullYear() + '-'
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
          var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
          var H = date.getHours() + ':'
          var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
          var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return Y + M + D + H + M2 + S
        }
      },
      yanzheng(record){
        let obj = {
          unsealExtractionList:[]
        }
        obj.unsealExtractionList.push(record)
        // console.log(obj);
        verification(obj).then( res => {
          if (res.success) {
            this.$message.success(res.message)
            this.loading = false
          } else {
            this.$message.success(res.message)
            this.loading = false
          }
        })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .search-wrapper-btn {
    position: absolute;
    right: 1%;
    top: 22px;
    z-index: 100;
  }
  /deep/.box {
  /*强制文本在一行内显示*/
  // white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  }
  </style>